<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <ul v-if="navItems.length > 0" :class="'navs list style-' + styleName">
            <li v-for="(nav, index) in navItems">
                <nav-item :nav="nav"></nav-item>
            </li>
        </ul>
        <empty v-else>请先在右侧面板中添加导航按钮</empty>
    </div>
</template>

<style scoped></style>

<script>
import Empty from "./Base/Empty";
import { getNavList } from '@/api/nav'
import NavItem from './NavItem.vue'
export default {
    components: { Empty, NavItem },
    data: function () {
        return {
            navItems: [],
        }
    },
    props: {
        module: { type: Object },
    },

    watch: {
        module: {
            immediate: true,
            deep: true,
            handler (val) {
                if (!val) {
                    return false;
                }
                var query = { scope: 'public_items', position_id: val.positionId }
                getNavList(query).then((res) => {
                    if (res.status != 0) {
                        return
                    }
                    this.navItems = res.data
                })

            },
        },

    },

    computed: {
        styleName: function () {
            return !this.module.styleName ? 3 : this.module.styleName;
        },
    },
};
</script>

<style scoped>
ul.navs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    padding: 16px;
    width: 100%;
    list-style: none;
}

ul.navs li {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}


ul.style-4 li {
    margin-right: calc((100% - 400px) / 3);
}

ul.style-4 li:nth-child(4n) {
    margin-right: 0px;
}

ul.style-4 li:nth-child(-n + 4) {
    margin-top: 0px;
}

ul.style-5 li {
    margin-right: calc((100% - 500px) / 4);
}

ul.style-5 li:nth-child(5n) {
    margin-right: 0px;
}

ul.style-5 li:nth-child(-n + 5) {
    margin-top: 0px;
}



ul.navs li.style-4 {
    width: 25%;
}

ul.navs li.style-5 {
    width: 20%;
}
</style>
